<template>
  <div class="row">
    <div class="col-md-12">
      <Table
        title="桥梁列表"
        :pageData="pageData"
        searchHint="输入关键字搜索，多个关键字用空格隔开"
        @sizeChange="handleSizeChange"
        @pageTurning="handlePageTurning"
        @sortChange="handleSortChange"
        @filterChange="handleFilterChange"
        @search="handleSearch">
        <!--索引列-->
        <el-table-column type="index" align="center" width="80px"></el-table-column>
        <!--表格主体内容-->
        <el-table-column v-for="col of columns"
                         align="center"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :sortable="col.sortable">
        </el-table-column>
        <!--操作列-->
        <el-table-column v-if="canView" label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.row)">定期</el-button>
          </template>
        </el-table-column>
      </Table>

      <!--时间线视图-->
      <el-dialog title="桥梁检查结果" v-model="isTimeLineVisible" size="small">
        <div v-loading="inspectionResultLoading">
          <h4 v-if="!inspectionResultList || inspectionResultList.length === 0">无检测结果</h4>
          <ul v-show="!!inspectionResultList && inspectionResultList.length > 0" class="timeline">
            <template v-for="item of inspectionResultList">
              <li class="time-label">
              <span class="bg-red">
                {{item.inspectionDate}}
              </span>
              </li>
              <li>
                <i class="fa fa-flag" :class="{
              'bg-aqua':item.bridgeLevel === 1,
              'bg-blue':item.bridgeLevel === 2,
              'bg-yellow':item.bridgeLevel === 3,
              'bg-orange':item.bridgeLevel === 4,
              'bg-red':item.bridgeLevel === 5,
              }"></i>
                <div class="timeline-item">
                  <h3 class="timeline-header"><b>桥梁技术状况等级：{{!!item.bridgeLevel?item.bridgeLevel+'类':'未评级'}}</b></h3>
                  <div class="timeline-body">
                    <img :src="getImgUrl(item.frontPath)" width="150" height="100" alt="正面照缺失" class="margin">
                    <img :src="getImgUrl(item.sidePath)" width="150" height="100"  alt="侧面照缺失" class="margin">
                    <img :src="getImgUrl(item.upwardPath)" width="150" height="100"  alt="仰视照缺失" class="margin">
                    <div style="line-height: 1em;">
                      <template v-for="e of item.bridgeEvaluationList">
                        <p class="evaluation-side-desc"><b>{{e.sideTypeName+'('+e.superstructureTypeName+')'+'：'+(e.evaluationType === 0?'综合评分：'+e.sidePoint+' / ':'调整评分：')+e.sideLevel+'类'}}</b></p>
                      </template>
                    </div>
                  </div>
                  <div class="timeline-footer">
                    <el-button size="mini" type="danger" :loading="originRecordLoading" @click="generateOriginalRecord(item.taskId, item.bridgeId)">生成病害原始记录</el-button>
                  </div>
                </div>
              </li>
            </template>
            <li>
              <i class="fa fa-clock-o bg-gray"></i>
            </li>
          </ul>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Table from "../bridge/Table.vue"
  import {hasAuthorizedFunction} from "../../../assets/js/global"
  import {VIEW} from "../../../assets/js/enum/FunctionType"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes"
  import {appendRequestParam, doGet} from "../../../assets/js/utils/RequestUtils"
  import {CONTEXT_PATH} from "../../../assets/js/global"
  import {pointToLevel} from "../../../assets/js/utils/EvaluationUtils";
  import {SUCCESS} from "../../../assets/js/enum/RequestResult";

  const DATA_URL = "/task/inspectionResult/getBridgeList";

  const INSPECTION_RESULT_URL = "/task/inspectionResult/getInspectionResultList";

  const IMG_URL = "/task/inspectionResult/getBridgePhoto";

  const GENERATE_ORIGINAL_RECORD = "/task/inspectionResult/generateOriginalRecord";

  const DOWNLOAD_ORIGINAL_RECORD = CONTEXT_PATH + "/task/inspectionResult/downloadOriginalRecord";

  export default {
    name:"InspectionResult",
    data() {
      return {
        pageData:{
          data:[],
          pageSize:10,
          total:0,
          currentPage:1
        },
        columns:[
          {prop:"name", label:"桥名", width:"200"},
          {prop:"roadNo", label:"路线号", sortable:"custom", width:"150"},
          {prop:"bridgeCategoryName", label:"桥梁分类", width:"150"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"}
        ],
        //根据搜索框输入的内容自动分割
        searchValues:[],
        sortProp:"",
        order:"",
        filter:{prop:"", values:[]},
        currentBridge:{},
        isTimeLineVisible:false,
        inspectionResultLoading:false,
        inspectionResultList:[],
        timeLineIconColor:"bg-red",
        //生成原始记录的进度条
        originRecordLoading:false
      }
    },
    computed:{
      canView() {
        return hasAuthorizedFunction(this, VIEW);
      }
    },
    methods:{
      getImgUrl(path) {
        let url = appendRequestParam(CONTEXT_PATH + IMG_URL, "tokenId", localStorage.getItem("tokenId"));
        return appendRequestParam(url, "path", path);
      },
      handleSizeChange(pageSize) {
        this.pageData.size = pageSize;
        this.fetchData();
      },
      handlePageTurning(index) {
        this.pageData.currentPage = index;
        this.fetchData();
      },
      handleSearch(value) {
        this.searchValues = value.split(" ");
        this.fetchData();
      },
      handleSortChange({column, prop, order}) {
        this.sortProp = prop;
        this.order = order;
        this.fetchData();
      },
      handleFilterChange(filter) {
        this.filter = filter;
        this.fetchData();
      },
      handleFileManage(data) {
        this.currentBridge = data;
        this.isFileVisible = true;
      },
      handleView(data) {
        this.isTimeLineVisible = true;
        this.fetchInspectionResult(data);
      },
      fetchInspectionResult(data) {
        this.inspectionResultLoading = true;
        doGet(INSPECTION_RESULT_URL, {data:{bridgeId:data.id}, component:this})
          .then(response=>this.inspectionResultList = response)
          .finally(()=>this.inspectionResultLoading = false);
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data:{
            pageSize:this.pageData.pageSize,
            currentPage:this.pageData.currentPage,
            searchArray:this.searchValues,
            sortProps:this.sortProp,
            order:this.order
          },
          component:this
        })
          .then(response=>this.pageData = response)
          .finally(()=>this.$store.commit(COMPLETE))
      },
      generateOriginalRecord(taskId, bridgeId) {
        this.originRecordLoading = true;
        doGet(GENERATE_ORIGINAL_RECORD, {
          data:{taskId, bridgeId,},
          component:this
        }).then(response=>{
          if(response.status === SUCCESS) {
            window.location.href = DOWNLOAD_ORIGINAL_RECORD + "?tokenId=" + localStorage.getItem("tokenId") + "&fileName=" + response.content;
          }else {
            this.$alert(response.message, "提示", {confirmButtonText:"确定"})
          }
        }).finally(()=>this.originRecordLoading = false);
      },
      pointToLevel
    },
    activated() {
      this.fetchData();
    },
    components:{Table}
  }
</script>



// WEBPACK FOOTER //
// InspectionResult.vue?1c32db29
